<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>汤山社会治理数据采集系统</title>
	<link rel="stylesheet" type="text/css" href="css/example.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/weui.min.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/element-ui.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/index.css?v=13.1.1" />
	<link rel="stylesheet" type="text/css" href="css/public.css?v=5.0.3" />
	<link rel="stylesheet" type="text/css" href="css/placeDetail.css?v=4.0" />
	<!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=863d4d6a77d04f017beb57826418a286"
		type="text/javascript"></script> -->
</head>

<body>
	<div id="main" style="position: relative;" v-cloak>
		<!-- 头部搜索框 -->
		<div class="ub-search">
			<input v-model="mapObj.keywords" type="text" placeholder="请输入您的搜索内容" @focus="isShowSearchTag=true"
				ref="inputRef">
			<img src="images/placeSearch.png">
			<a class="weui-btn weui-btn_primary" @click="inputBtn">搜索</a>
			<div class="ub-searchtag" v-show="isShowSearchTag">
				<el-tag :effect="mapobjtags.indexOf(item.tag)==-1?'plain':'dark'" type="success"
					v-for="(item) in categoryListData" @click="handleSearchTag(item.tag,item.name)">
					{{item.tag_name}}
				</el-tag>
			</div>
		</div>
		<!-- 地图，goCurrent跳转到当前位置 -->
		<div class="ub-height" id="ub-drow">
			<div @click="goCurrent()"
				style="position: absolute;right: 10px;bottom: 10px;z-index: 2;width: 40px;height: 40px;background: #fff;display: flex;align-items: center;justify-content: center;border-radius: 8px;">
				<img style="width: 20px;" src="images/center.png">
			</div>
			<div class="container">
				<div id="container"></div>
			</div>

		</div>
		<!-- 行业，网格切换。数据展示 -->
		<div class="ub-list">
			<div>
				<div class="ub-listTitle">
					<div v-cloak @click="active = 1" :class="active == 1?'ub-listActive':''">
						行业 ( {{placeList.length}} )
						<div :class="active == 1?'ub-line':''"></div>
					</div>

					<div v-cloak @click="active = 2" :class="active == 2?'ub-listActive':''">
						网格 ( {{gridTotal}} )
						<div :class="active == 2?'ub-line':''"></div>
					</div>
					<div v-cloak @click="active = 3" :class="active == 3?'ub-listActive':''">
						九小 ( {{placeList.length}} )
						<div :class="active == 3?'ub-line':''"></div>
					</div>
					<div class="ub-onPull">
						<img v-cloak @click="downHeight" :style="isDown == false?'transform: rotateX(180deg)':''"
							src="images/onPull.png">
					</div>
				</div>
				<div v-cloak style="margin: 5px 0 8px 20px;color: #888888;">场所总数:
					&nbsp;<span style="color: #FF5000;" v-show="active != 3">{{placeTotal}}处</span><span
						style="color: #FF5000;" v-show="active == 3">{{ninePlaceTotal}}处</span>
				</div>
				<div v-cloak class="ub-listContent" v-show="active == 1">
					<div v-cloak @click="industryImg(item,index)" v-for="(item,index) in placeList" class="ub-place">
						<img v-cloak v-if="item.flag == false" :src="item.cate_icon">
						<img v-cloak v-else :src="item.icon_checked">
						<p v-cloak>{{item.cate_name}}</p>
						<div v-cloak>{{item.count}}处</div>
					</div>
				</div>
				<div v-cloak class="ub-listContent" v-show="active == 3">
					<div v-cloak @click="industryNineImg(item,index)" v-for="(item,index) in nineSmallList"
						class="ub-place">
						<img v-cloak v-if="item.flag == false" :src="item.cate_icon">
						<img v-cloak v-else :src="item.icon_checked">
						<p v-cloak>{{item.cate_name}}</p>
						<div v-cloak>{{item.count}}处</div>
					</div>
				</div>
			</div>
			<div v-cloak class="ub-listContent2" v-show="active == 2">
				<div v-for="item in gridList" class="ub-communityContent">
					<div class="ub-community" :style="item.flag1?'background: #dcdcdc;border-radius:4px':''">
						<div @click="communityBtn(item)">
							<img src="images/listIcon15.png" alt="">
							<div v-cloak>
								<p v-cloak>{{item.name}}</p>
								<div v-cloak>{{item.count}}处</div>
							</div>
						</div>
						<div @click="unwindBtn(item.dept_id)" class="ub-lookBth">{{item.flag?'收起':'查看'}}</div>
					</div>
					<div class="ub-grid" v-show="item.flag">
						<div @click="goPlaceList(item1.dept_id)" v-for="(item1,index) in sonList" :key="item1.dept_id"
							class="ub-gridContent">
							<div v-cloak>
								<p v-cloak>{{item1.place_name}}</p>
								<div v-cloak>{{item1.count}}处</div>
							</div>
							<img src="images/listRight.png">
						</div>
						<div @click="item.flag = !item.flag" class="ub-packUp">
							<img src="images/packUp.png">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 右侧列表，全部，九小按钮 -->
		<div class="ub-btnLayout">
			<div v-cloak
				v-show="mapObj.keywords || mapObj.cate_id || mapObj.dept_id || placeObj.cate_id || placeObj.dept_id"
				class="ub-listbtn" @click="ListBtn(1)" :style="isModal?'z-index:1000':''">
				<img src="images/indexList.png">
				<p>列表</p>
			</div>
			<div @click="allBtn(2)" class="ub-allBtn">
				<img src="images/indexAll.png">
				<p>全部</p>
			</div>
			<div @click="handleShowPlace9()" class="ub-place-nine" :style="isPlace9?'z-index:1000':''">
				<img src="images/place-9.png">
				<p>标签</p>
			</div>
			<div class="ub-place-monitor" @click="goMonitor">
				<img src="images/index-monitor.png">
				<p>监控</p>
			</div>
		</div>
		<!-- 右侧按钮点击，弹窗 -->
		<!-- 点击列表显示的框或搜索显示的框 -->
		<div v-cloak class="ub-indexListModal" v-show="isModal" @click="isModal = false"></div>
		<div v-cloak class="ub-indexListModal-content" id="ub-scroll" v-show="isModal">
			<div v-if="mapObj.keywords" v-cloak class="ub-modal-content" style="padding-top: 10px;">
				<div style="text-align: center;" v-cloak v-if="communityList.length == 0 && mapObj.keywords">
					<p style="text-align: left;">你搜索的 <span style="color: #930000;">"{{mapObj.keywords}}"</span> 的结果
					</p>
					<div>
						<img style="width: 60%;" src="images/noData.png">
						<p style="text-align: center;color: #8c8c8c;">暂无数据</p>
					</div>
				</div>
				<div v-cloak v-if="communityList.length > 0 && mapObj.keywords">你搜索的 <span
						style="color: #930000;">"{{mapObj.keywords}}"</span> 的结果</div>
				<div class="ub-sonCommunity" @click="getSonPlace(item.dept_id,index)"
					v-for="(item,index) in communityList" :key="item.id">
					<div class="ub-sonCommun"
						:style="item.flag?'position: sticky;top: 0;background: #dcdcdc;border-radius:4px':''">
						<div class="ub-sonCommun-content">
							<img src="images/listIcon15.png">
							<p>{{item.name}}</p>
							<span>({{item.count}})</span>
						</div>
						<div class="ub-JT">
							<img v-if="item.flag == false" style="width: 15px;height: 15px;" src="images/rightJT.png">
							<img v-else style="width: 15px;height: 15px;" src="images/downJT.png">
						</div>
					</div>
					<div v-show="item.flag" class="ub-modal-content1">
						<div @click="getPointDetail(item1.id)" v-for="item1 in sonPlaceList" :key="item1.id">
							<img src="images/placeLocation.png">
							<p>{{item1.place_name}}</p>
						</div>
					</div>
				</div>
			</div>
			<div v-else v-cloak class="ub-modal-content">
				<div v-if="listActive == 1" class="ub-sonCommunity" v-for="(item,index) in communityList"
					:key="item.id">
					<div class="ub-sonCommun">
						<div class="ub-sonCommun-content">
							<img src="images/listIcon15.png">
							<p>{{item.name}}</p>
							<span>({{item.count}})</span>
						</div>
					</div>
				</div>
				<div v-if="listActive == 2" class="ub-sonCommunity" v-for="(item,index) in categoryData" :key="item.id">
					<div class="ub-sonCommun">
						<div class="ub-sonCommun-content">
							<img :src="item.cate_icon">
							<p>{{item.cate_name}}</p>
							<span>({{item.count}})</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 点击九小显示的框 -->
		<div v-cloak class="ub-indexListModal" v-show="isPlace9" @click="isPlace9 = false"></div>
		<div v-cloak class="ub-indexListModal-content" id="ub-scroll" v-show="isPlace9">
			<div v-cloak class="ub-modal-content">
				<div class="ub-isPlace9" style="z-index: 2;">
					<div>
						<p>标签详情</p>
						<div class="ub-isPlace9-line"></div>
					</div>
				</div>
				<div class="ub-sonCommunity" v-for="(item,index) in categoryListData" :key="item.id">
					<div class="ub-sonCommun" style="width: 90%;" @click="handleSearchTag(item.tag,item.tag_name,1)">
						<div class="ub-sonCommun-content">
							<!-- <img src="images/listIcon15.png"> -->
							<p>{{item.tag_name}}</p>
							<span>({{item.count}})</span>
						</div>
					</div>
					<img :class="{'active':isPlace9Sel}" class="ub-nineUpImg" src="images/onPull.png" alt=""
						v-if="index==0" @click="isPlace9Sel = !isPlace9Sel">
					<!-- 九小的数据 -->
					<div class="ub-sonCommun" style="width: 90%;padding-left: 10px;" @click="industryNineImg(e,i)"
						v-if="index==0 && isPlace9Sel" v-for="(e,i) in nineSmallList">
						<div class="ub-sonCommun-content">
							<p>{{e.cate_name}}</p>
							<span>({{e.count}})</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 场所详情弹窗，弹窗 -->
		<el-drawer title="场所详情" :visible.sync="showDetail" :with-header="true" direction="btt" size="60%"
			style="z-index: 9999999;" :show-close="true">
			<div v-cloak class="ub-main-detail">
				<div v-if="showDetail" class="ub-all ub-all2">
					<div class="ub-placeTitle" style="display: flex;">
						<div @click="lookImg([detail.images[0]])">
							<img style="width: 90px;height: 50px;margin-right: 10px;" :src="detail.images[0]">
						</div>
						<div v-cloak class="ub-placeTitle-content" style="width: 100%;">
							<div style="display: flex;align-items: center;justify-content: space-between;">
								<div style="display: flex;align-items: center;">
									<p>{{detail.place_name}}</p>
									<div v-if="detail.is_small_place == 1">
										<img style="width: 30px;" src="images/place9xiao.png">
									</div>

								</div>
								<div v-cloak v-if="detail.video !== ''" @click="showVideo()" class="showVideo">
									<img src="images/monitoring.png">
								</div>
							</div>
							<!-- <el-tag effect="plain" size="mini" @click="showAddresss">
								点位详情
							</el-tag> -->
							<div
								style="display: flex;align-items: center;width: 100%;justify-content: space-between;font-size: 14px;">
								<div style="display: flex;align-items: center;width: 80%;">
									<img src="images/placeLocation.png">
									<p class="ub-address10">{{detail.address}}</p>
								</div>
								<div style="width: 100px;background: #d4efff;text-align: center;border-radius: 5px;">
									<div @click="goMap()"
										style="display: flex;align-items: center;justify-content: center;color: #1275FF;">
										<img src="images/goMap.png" style="margin-right: 5px;background: none">
										<p>到这去</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ub-layout-no">
						<div>
							<div class="ub-noLocation" v-if="detail.has_location == 0">无定位</div>
							<div class="ub-noImages" v-if="detail.has_images == 0">无相片</div>
							<div class="ub-noNote" v-if="detail.has_remark == 0">无备注</div>
						</div>
						<div class="ub-nearMonitor" @click="showNearMonitor" v-cloak v-show="nearMonitorList.length">
							附近监控
							({{nearMonitorList.length}})
						</div>
					</div>
					<p>{{detail.grids}}</p>
					<div class="ub-jcsj_p">
						<div class="ub-text_1">
							检查时间：
						</div>
						<div class="ub-text_2" v-if="detail.last_check_time_cn">
							{{detail.last_check_time_cn}}
						</div>
						<div class="ub-text_2" v-if="!detail.last_check_time_cn">
							暂无
						</div>
					</div>
					<div class="ub-contacts">
						<p>场所联系人</p>
						<div v-for="(item,index) in detail.link_man_info">
							<span>{{item.name}}:</span>
							<a :href="'tel:'+ item.phone ">{{item.phone}}</a>
						</div>
					</div>
					<div class="ub-situation">
						<p>基本情况</p>
						<p v-html="detail.content == null? '无' : detail.content"></p>
					</div>

					<div v-cloak class="ub-placeImg">
						<p>场所照片</p>
						<div style="display: flex;">
							<div v-if="detail.images.length == 0">暂无照片</div>
							<div v-else v-for="item in detail.images">
								<img @click="lookImg(detail.images)"
									style="width: 90px;height: 50px;margin-right: 10px;" :src="item">
							</div>
						</div>
					</div>
					<div class="ub-note">
						<p>备注</p>
						<div v-if="detail.remark_record.length == 0">暂无备注</div>
						<div v-else v-for="item in detail.remark_record">
							<p>
								<span>{{item.create_time}}{{item.grids_person}}：</span>
								<span>{{item.remark}}</span>
								<span v-if="item.images.length > 0" @click="lookImg(item.images)">查看照片</span>
							</p>
						</div>
					</div>
					<div class="ub-newBtnBox" v-cloak>
						<div class="ub-newBtn ub-newBtnBg1" v-cloak @click="goInspectionDetails(detail.id,1)">检查记录</div>
						<div class="ub-newBtn ub-newBtnBg2" v-cloak @click="goInspectionDetails(detail.id,0)">检查</div>
					</div>
				</div>
				<!-- <div @click="showDetail = false" class="ub-quxiao" v-show="showDetail">
					<img src="images/quxiao.png" alt="">
				</div> -->
			</div>
		</el-drawer>
		<!-- 18个村社区简介，弹窗 -->
		<div v-cloak class="ub-main-detail">
			<div v-show="showCommunitDetail" class="ub-all ub-all1"
				:style="communityDetail?'height: 100vh;overflow: hidden':''">
				<div :style="communityDetail?'height: 100vh;':''">
					<div class="ub-community-title">
						<span>{{communityTitle}}简介</span>
					</div>
					<div style="max-height: 58%;overflow-y: auto;text-align: justify;padding: 0 10px;"
						v-if="communityDetail" v-html="communityDetail"></div>
					<div v-cloak class="ub-community-noData" v-else>
						<img src="images/noData.png">
						<span>暂无简介</span>
					</div>
				</div>
				<div @click="showCommunitDetail = false" class="ub-quxiao ub-quxiao3" v-show="showCommunitDetail">
					<img src="images/quxiao1.png" alt="">
				</div>
			</div>
		</div>
		<!-- 搜索无数据提示框 -->
		<el-dialog v-cloak :title="mapObj.keywords" :visible.sync="isKeywords" width="95%" style="border-radius: 8px;"
			:show-close="false" center>
			<div style="text-align: center;">暂无数据</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" style="width: 50%" @click="isKeywords = false">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 场所位置弹窗 -->
		<el-dialog v-cloak id="manual" center title="位置详情" :visible.sync="isManual" width="95%">
			<div id="containerma"></div>
		</el-dialog>
		<!-- 监控弹窗 -->
		<div v-cloak class="ub-videomodal" @click="closeVodeo()" v-show="isShowVideo">
			<div v-show="isLoading">
				<i style="font-size: 30px;color: #fff;" class="el-icon-loading"></i>
			</div>
		</div>
		<div v-cloak class="ub-video1" v-show="isShowVideo">
			<div class="my-player" id="video1">
				<video id="my-player" style="width: 100%;" preload="auto" muted autoplay controls
					style="border: 1px solid red;" webkit-playsinline="true" playsinline="true">
					<source src="">
				</video>
				<div id="my-player1" class="ub-video"></div>
			</div>
		</div>
		<div class="ub-cloce" v-show="isShowVideo">
			<el-button icon="el-icon-close" circle @click="closeVodeo()"></el-button>
		</div>

		<!-- 显示天翼监控 -->
		<div v-cloak class="ub-videomodal" @click="closeVodeo()" v-show=" isShowTYVideo">
			<div v-show="isShowTYVideoLoading">
				<i style="font-size: 30px;color: #fff;" class="el-icon-loading"></i>
			</div>
		</div>
		<div v-cloak class="ub-sty" v-show="isShowTYVideo && !isShowTYVideoLoading" style="display: none;" v-cloak>
			<iframe id="TYplayer" :src="TYUrl" allowfullscreen marginwidth=0 marginheight=0 onerror="error">
			</iframe>
		</div>
		<div class="ub-cloce" v-show="isShowTYVideo">
			<el-button icon="el-icon-close" circle @click="closeVodeo()"></el-button>
		</div>
		<!-- 底部栏 -->
		<div class="ub-footerNav">
			<div role="tablist" aria-label="选项卡标题" class="weui-tabbar">
				<a href="index.html?from=1" id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips"
					aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on">
					<div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
						<img src="images/navIcon1-selected.png" alt="" class="weui-tabbar__icon">
					</div>
					<p id="t1_title" aria-hidden="true" class="weui-tabbar__label">地图查看</p>
				</a>
				<a href="listLook.html" id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false"
					aria-controls="panel2" class="weui-tabbar__item">
					<img src="images/navIcon3.png" alt="" class="weui-tabbar__icon">
					<p aria-hidden="true" id="t2_title" class="weui-tabbar__label">列表查看</p>
				</a>
				<a href="personalCenter.html" id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips"
					aria-selected="false" aria-controls="panel3" class="weui-tabbar__item">
					<div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
						<img src="images/navIcon2.png" alt="" class="weui-tabbar__icon">
					</div>
					<p id="t3_title" aria-hidden="true" class="weui-tabbar__label">个人中心</p>
				</a>
			</div>
		</div>

	</div>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jwt-decode.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/cHttp.js?v=1.0.0" type="text/javascript" charset="utf-8"></script>
	<script src="js/flv.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/hls.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="js/video-contrib.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="js/videoJs.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ckplayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="h5Player/h5player.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wxPublic.js?v=12.0.0" type="text/javascript" charset="utf-8"></script>
	<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/g-tConversion.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/t-gConversion.js" type="text/javascript" charset="utf-8"></script>
	<script src="/js/EasyWasmPlayer.js"></script>
	<script src="https://vcp.21cn.com/metaplayer/static/template/latest/lib/mpIframe-min.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="js/tdApi.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index-p.js?v=1.0.79" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="js/tianditu.js" type="text/javascript" charset="utf-8"></script> -->

	<!-- <script
			src="https://webapi.amap.com/maps?v=2.0&key=98151bd8211171db74270a09d7dde508&plugin=AMap.DistrictSearch">
		</script> -->
</body>

</html>